<!-- 注册 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon"  href="/img/蛋糕.svg" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cookie</title>
    <link rel="stylesheet" href="./css/cookie.css">
    <link rel="stylesheet" href="./css/lbt.css">
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div>
    <!-- 头部导航栏 -->
    <div class="header">
        <div class="header-left">
            <div class="logo" style="border-top: 0px;">
                <img src=" ./img/logo.png" alt="">
            </div>
            <div class="location" style="border-top: 0;">
                <a href="#">
                    <span>珠海市</span>
                </a>
            </div>
            <div class="products">
                <a href="#">
                    <span>所有产品</span>
                </a>
            </div>
            <div class="home" style="border-top: 3px #ffe32a solid;">
                <a href="../sy/cookie.html">
                    <span style="color: black;">首页</span>
                </a>
            </div>
            <div class="cakes">
                <a href="../cake.html">
                    <span>蛋糕</span>
                </a>
            </div>
            <div class="breads">
                <a href="../mb.html">
                    <span>面包</span>
                </a>
            </div>
            <div class="snacks">
                <a href="../snack.html">
                    <span>小食</span>
                </a>
            </div>
            <div class="bds">
                <a href="../test.html">
                    <span>企业专区</span>
                </a>
            </div>
        </div>
        <div class="header-right">
            <div class="login-header">
                <span class="head-span">
                    <a href="../register.html">
                        <span class="zhuce">注册</span>
                    </a>
                    &nbsp;|&nbsp;
                    <a href="../Login.html">
                        <span class="login">登录</span>
                    </a>
                </span>
            </div>
            <div class="mycar">
                <a href="../ShoppingCart.html">
                    <img class="car" src="./img/car.png" alt="">
                </a>

            </div>
            <div class="activity">
                <a href="">
                    <img class="icon2" src="./img/icon02.png" alt="">
                </a>

            </div>
        </div>
    </div>
    <div style="height: 5px;"></div>
    <div class="banner">
        <div class="warp">
            <!-- 这里修改自己的图片路径哦~ -->
            <div class="item"><a :href="'../shangpinxiangxi.html?id=2'"><img src="./img/lbt1.jpg" alt=""></a></div>
            <div class="item"><a :href="'../shangpinxiangxi.html?id=6'"><img src="./img/lbt2.jpg" alt=""></a></div>
            <div class="item"><a :href="'../shangpinxiangxi.html?id=6'"><img src="./img/lbt3.jpg" alt=""></a></div>
            <div class="item"><a :href="'../shangpinxiangxi.html?id=6'"><img src="./img/lbt4.jpg" alt=""></a></div>
        </div>
        <div class="div1">
            &lt;
        </div>
        <div class="div2 ">
            &gt;
        </div>
        <!-- 小圆点 -->
        <div class="pagenation">
            <div id="pagenation-item0"></div>
            <div id="pagenation-item1"></div>
            <div id="pagenation-item2"></div>
            <div id="pagenation-item3"></div>
        </div>
    </div>
    </div>

    <div class="yang">
        <div><img src="./img/knifeFork.png" alt=""></div>
        <div>
            <h3>
                <span>本季</span>
                <span style="font-weight: 200;">推荐</span>
            </h3>
            <p style="color: #c7c3c3;">Seasonal Recommend</p>
        </div>
        <h4 style="color: #c7c3c3;">Seasonal</h4>
    </div>
    <div class="zhongjiantu">
        <a href="">
            <img src=" ./img/a.jpg" alt="">
        </a>
        <a href="">
            <img src="./img/b.jpg" alt="">
        </a>
        <a href="">
            <img src="./img/c.jpg" alt="">
        </a>
    </div>


    <!-- 法式经典 -->
    <div class="yang">
        <div><img src="./img/knifeFork.png" alt=""></div>
        <div>
            <h3>
                <span>法式</span>
                <span style="font-weight: 200;">经典</span>
            </h3>
            <p style="color: #c7c3c3;">
                French Classics</p>
        </div>
        <h4 style="color: #c7c3c3;">French</h4>
        <div id="h6" style="float: right; margin-top: auto;">
            <a href="../cake.html">查看更多 </a>
            <img style="
            margin-top: 15px;
             line-height: 17px;
             position: relative;
             top: 3px;
            " src="./img/24gf-ellipsis.png" alt="">
        </div>
    </div>
    <div style="text-align: center;">
        <a href="">
            <img style=" width:1280px;" src="./img/a1.jpg" alt="">
        </a>
    </div>
    <div class="neirong">
        <div class="biaodan">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>蓝莓轻乳拿破仑</p>
                <span>Napoleon aux myrtilles</span>
            </div>
            <span style="margin-left: 40px;">
                ￥198.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/2.jpg);
        background-repeat: no-repeat;
        background-position: top;">
            <div style=" height: 300px; margin-top: 30px; margin-left: 40px; ">
                <p>黑森林拿破仑
                </p>
                <span>La Foret noir</span>
            </div>
            <span style=" margin-left: 40px;">
                ￥198.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/3.jpg);
        background-repeat: no-repeat;
        background-position: top;">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>蔓越莓红丝绒</p>
                <span>Velour rouge</span>
            </div>
            <span style="margin-left: 40px;">
                ￥198.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/4.jpg);
        background-repeat: no-repeat;
        background-position: top;">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>法香奶油可丽
                </p>
                <span>Gateau de crepes</span>
            </div>
            <span style="margin-left: 40px;">
                ￥198.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/5.jpg);
        background-repeat: no-repeat;
        background-position: top;">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>卡法香缇
                </p>
                <span>Genoise cafě</span>
            </div>
            <span style="margin-left: 40px;">
                ￥198.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/6.jpg);
        background-repeat: no-repeat;
        background-position: top;">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>榛果摩卡布拉吉
                </p>
                <span>Moka praline noisette</span>
            </div>
            <span style="margin-left: 40px;">
                ￥218.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>


    </div>

    <!-- 节日庆典 -->
    <div class="yang">
        <div><img src="./img/knifeFork.png" alt=""></div>
        <div>
            <h3>
                <span>节日</span>
                <span style="font-weight: 200;">庆典</span>
            </h3>
            <p style="color: #c7c3c3;">
                Festival celebration</p>
        </div>
        <h4 style="color: #c7c3c3;">Festival</h4>
        <div id="h6" style="float: right; margin-top: auto;">
            <a href="#">查看更多 </a>
            <img style="
            margin-top: 15px;
             line-height: 17px;
             position: relative;
             top: 3px;
            " src="./img/24gf-ellipsis.png" alt="">
        </div>
    </div>
    <div style="text-align: center;">
        <a :href="'../shangpinxiangxi.html?id=3'">
            <img style="width: 1280px;" src="./img/77e1e5cbe9c1a05c.jpg" alt="">
        </a>
    </div>
    <div class="neirong">
        <div class="biaodan" style="background-image: url(./img/11.jpg);">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>花漾年华

                </p>
                <span>Floraison

                    Charmes masculins</span>
            </div>
            <span style="margin-left: 40px;">
                ￥298.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/12.jpg);">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>歌剧院</p>
                <span>Opera</span>
            </div>
            <span style="margin-left: 40px;">
                ￥218.00
                
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/13.jpg);">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>男友力</p>
                <span>Charmes masculins</span>
            </div>
            <span style="margin-left: 40px;">
                ￥198.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/14.jpg);">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>爱丽丝花境

                </p>
                <span>Jardin d'Alice

                </span>
            </div>
            <span style="margin-left: 40px;">
                ￥298.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/15.jpg);">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>荔枝瑰夏</p>
                <span>Lychee Rose d'Ete</span>
            </div>
            <span style="margin-left: 40px;">
                ￥218.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/16.jpg);">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>榛子奶油</p>
                <span>Creme de noisette</span>
            </div>
            <span style="margin-left: 40px;">
                ￥198.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>

    </div>

    <!-- 儿童系列 -->
    <div class="yang">
        <div><img src="./img/knifeFork.png" alt=""></div>
        <div>
            <h3>
                <span>儿童</span>
                <span style="font-weight: 200;">系列</span>
            </h3>
            <p style="color: #c7c3c3;">Children Series</p>
        </div>
        <h4 style="color: #c7c3c3;">Children</h4>
        <div id="h6" style="float: right; margin-top: auto;">
            <a href="#">查看更多 </a>
            <img style="
            margin-top: 15px;
             line-height: 17px;
             position: relative;
             top: 3px;
            " src="./img/24gf-ellipsis.png" alt="">
        </div>
    </div>
    <div style="text-align: center;">
        <a :href="'../shangpinxiangxi.html?id=2'">
            <img style=" width:1280px;" src="./img/edda5022a05a8e16.jpg" alt="">
        </a>
    </div>
    <div class="neirong">
        <div class="biaodan" style="background-image: url(./img/21.jpg);">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>尼诺</p>
                <span>Nino</span>
            </div>
            <span style="margin-left: 40px;">
                ￥298.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/22.jpg);">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>沙布蕾芭菲</p>
                <span>Sable parfait</span>
            </div>
            <span style="margin-left: 40px;">
                ￥198.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/23.jpg);">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>安逸兔</p>
                <span>lapin detendu</span>
            </div>
            <span style="margin-left: 40px;">
                ￥218.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/24.jpg);">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>胖达乐园

                </p>
                <span>Panda Paradise

                </span>
            </div>
            <span style="margin-left: 40px;">
                ￥298.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/25.jpg);">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>可可雪球</p>
                <span>Boule de neige au cacao</span>
            </div>
            <span style="margin-left: 40px;">
                ￥48.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/26.jpg);">
            <div style="
            height: 300px;
            margin-top: 30px;
            margin-left: 40px;
            ">
                <p>半熟芝士（原味）</p>
                <span>fromage semi-fermente original</span>
            </div>
            <span style="margin-left: 40px;">
                ￥48.00
                <img style=" margin-top: 20px; margin-left: 190px; width: 40px;" src="./img/线性购物车.png" alt="">
            </span>
        </div>

    </div>


    <div style=" text-align: center; height: 200px; font-size: 30px;line-height: 200px;">
        企业专区 Enterprise Zone
    </div>
    <div style="text-align: center;">
        <a :href="'../shangpinxiangxi.html?id=2'">
            <img style=" width:1280px;" src="./img/311456139835a147.jpg" alt="">
        </a>
    </div>

    <div class="footer">
        <div class="footer-cont">
            <div class="footer-left">
                <div class="foot-logo">
                    <img src="./img/logo1.png" alt="">
                    <div class="left-p">
                        <p>订购热线：4006-678-678（8:00 - 20:00）</p>
                        <p>客服邮箱：cs@mcake.com</p>
                        <p>地址：上海市普陀区同普路1130弄3号楼</p>
                        <p><a href=#>食品生产许可证：SC12431010700121</a></p>
                    </div>
                </div>
            </div>
            <div class="footer-right">
                <div class="about">
                    <h3>关于我们</h3>
                    <p>
                        <a href="#">企业介绍</a>
                    </p>
                    <p>
                        <a href="#">媒体合作</a>
                    </p>
                    <p>
                        <a href="#">招贤纳士</a>
                    </p>
                    <p>
                        <a href="#">呼叫中心</a>
                    </p>
                </div>
                <div class="help">
                    <h3>帮助中心</h3>
                    <p>
                        <a href="#">投诉与建议</a>
                    </p>
                    <p>
                        <a href="#">会员权益</a>
                    </p>
                    <p>
                        <a href="#">购物指南</a>
                    </p>
                    <p>
                        <a href="#">支付类</a>
                    </p>
                    <p>
                        <a href="#">订单相关</a>
                    </p>
                    <p>
                        <a href="#">配送服务</a>
                    </p>
                </div>
                <div class="find">
                    <h3>发现</h3>
                    <p>
                        <a href="#">公告</a>
                    </p>
                </div>
                <div class="wei">
                    <img src="./img/weixin.png" alt="">
                    <a href="#">
                        <img src="./img/weibo.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="bot-p1">
                <p>上海卡法电子商务有限公司</p>
                <p>地址：上海市普陀区同普路1130弄3号楼</p>
                <p>洽谈电话：021-52691591</p>
                <p class="gov-p">
                    <a href="#">社会信用代码：913101070678091460</a>
                </p>
                <p class="gov-p">
                    <a href="#">食品经营许可证：JY13101070034251</a>
                </p>
            </div>
            <div class="bot-p2">
                <p>上海卡法电子商务有限公司北京分公司</p>
                <p>地址：北京市朝阳区望京西路甲50号1号楼6层1-08内606单元</p>
                <p>洽谈电话：010-64720188</p>
                <p class="gov-p">
                    <a href="#">社会信用代码：911101053484280752</a>
                </p>
                <p class="gov-p">
                    <a href="#">食品经营许可证：JY11105262932938</a>
                </p>
            </div>
            <div class="bot-p3">
                <p>上海卡法电子商务有限公司杭州分公司</p>
                <p>地址：杭州市拱墅区朝晖路179号嘉汇大厦2号楼25-1室</p>
                <p>洽谈电话：0571-28103688</p>
                <p class="gov-p">
                    <a href="#">社会信用代码：913301060920344424</a>
                </p>
                <p class="gov-p">
                    <a href="#">食品经营许可证：JY13301050141226</a>
                </p>
            </div>

        </div>
        <p class="copyright">
            Copyright © 2012-2023 上海卡法电子商务有限公司 版权所有 l <沪ICP备12022075号 href="#">沪ICP备12022075号</a>
                l
                <a href="#">沪公网安备31010702005582号</a>
        </p>
    </div>
</div>
    <script>

        const vm = new Vue({
            el:"#app",
            data:{}
        })

        var index = 0; //定义初始下标
        var banner = document.getElementsByClassName("banner")[0];
        var itemList = document.getElementsByClassName("item");
        var pagenationList = document.querySelectorAll(".pagenation>div");
        var pagenation = document.querySelector(".pagenation");
        itemList[0].style.opacity = 1;
        pagenationList[0].style.background = "blue" //初始第一张图对应的小圆点的颜色为蓝色
        var up = document.getElementsByClassName("div1")[0];
        var next = document.getElementsByClassName("div2")[0];
        //下一张图片（封装方便下面自动播放定时器调用）
        function nextFn() {
            index = index >= itemList.length - 1 ? 0 : ++index; //判断点击到了最后一张图片再次点击返回到第一张图
            for (var i = 0; i < itemList.length; i++) {
                itemList[i].style.opacity = 0; //图片透明度为0图片隐藏
                pagenationList[i].style.background = "white " //图片没显现小圆点的颜色为白色
            }
            itemList[index].style.transition = "opacity 1s ease .2s"
            itemList[index].style.opacity = 1; //图片透明度为1图片显现
            pagenationList[index].style.background = "blue" //图片显现小圆点的颜色为蓝色
        }
        next.onclick = nextFn; //下一张（点击事件）点击切换下一张图片
        up.onclick = function () { //上一张（点击事件）点击切换上一张图片
            index = index <= 0 ? itemList.length - 1 : --index; //判断点击到了第一张图片再次点击返回到最后一张图
            for (var i = 0; i < itemList.length; i++) {
                itemList[i].style.opacity = 0;
                pagenationList[i].style.background = "white"
            }
            itemList[index].style.transition = "opacity 1s ease .2s" //增加过渡效果
            itemList[index].style.opacity = 1;
            pagenationList[index].style.background = "blue"
        }
        //设置定时器，自动向下播放图片
        var t1 = setInterval(nextFn, 1200)
        banner.onmouseover = function () {
            clearInterval(t1);
        }
        banner.onmouseout = function () {
            t1 = setInterval(nextFn, 1500)
        }
        // 事件委托
        pagenation.onclick = function (event) {
            event = window.event || event
            console.log(event);
            if (event.target.className == "pagenation") {
                console.log("点击的是父元素");
            } else {
                var id = event.target.id;
                var photoIndex = null;
                for (var i = 0; i < pagenationList.length; i++) {
                    pagenationList[i].style.background = "white"
                    if (id.indexOf(i) >= 0) {
                        photoIndex = i;
                    }
                }
                event.target.style.background = "blue"
                index = photoIndex; // 将小圆点对应的下标与图片下标对应
                for (var i = 0; i < itemList.length; i++) {
                    itemList[i].style.opacity = 0;
                }
                itemList[index].style.transition = "opacity 1s ease .2s"
                itemList[photoIndex].style.opacity = 1;
            }
        }
    </script>
</body>

</html>